<template>
  <div class="app-container">
    <side-menu>
      <side-btn url="/">
        <template #btn-icon>
          <svg t="1589125234371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16067" width="22" height="22"><path d="M878.28 468.83v304.41q0 16.66-12.22 28.88-12.22 12.23-28.89 12.23h-243.3V571.04H430.55v243.31h-243.3q-16.66 0-28.88-12.23-12.23-12.23-12.23-28.88V468.83l0.56-1.67 0.56-1.66 364.4-301.08L877.18 465.5q1.11 1.11 1.11 3.33z m141.09-43.33l-38.88 46.66q-5.56 5.56-13.33 6.67h-2.23q-8.88 0-13.33-4.44L511.65 108.88 72.82 474.39q-7.78 5.55-15.55 4.44-7.78-1.11-13.34-6.67L5.05 425.5q-5.55-6.66-5-15 0.55-8.33 7.21-13.88L463.87 16.66Q483.87 0 512.2 0t48.33 16.66l154.42 128.88V22.22q0-8.89 6.11-14.44 6.11-5.55 15-5.55h121.1q8.89 0 15 5.55 6.11 5.55 6.11 14.44v258.86l138.87 115.54q5.55 5.55 6.67 13.88 1.12 8.33-4.45 15z" fill="#1296db" p-id="16068"></path></svg>
        </template>
        <template #btn-text>
          首页
        </template>
      </side-btn>
      <side-btn url="/list-project">
        <template #btn-icon>
          <svg t="1589642573396" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" width="22" height="22"><path d="M877.714286 219.428571a48.761905 48.761905 0 0 1 48.761904 48.761905v609.52381a48.761905 48.761905 0 0 1-48.761904 48.761904H146.285714a48.761905 48.761905 0 0 1-48.761904-48.761904V219.428571h780.190476z m-121.904762 390.095239H390.095238a24.380952 24.380952 0 0 0 0 48.761904h365.714286a24.380952 24.380952 0 0 0 0-48.761904z m-463.238095 0h-24.380953a24.380952 24.380952 0 0 0 0 48.761904h24.380953a24.380952 24.380952 0 0 0 0-48.761904z m463.238095-121.904762H390.095238a24.380952 24.380952 0 0 0 0 48.761904h365.714286a24.380952 24.380952 0 0 0 0-48.761904z m-463.238095 0h-24.380953a24.380952 24.380952 0 0 0 0 48.761904h24.380953a24.380952 24.380952 0 0 0 0-48.761904z m154.404571-390.095238a48.761905 48.761905 0 0 1 29.257143 9.75238L560.761905 170.666667H97.52381V146.285714a48.761905 48.761905 0 0 1 48.761904-48.761904h300.690286z" p-id="2423" fill="#1296db"></path></svg>
        </template>
        <template #btn-text>
          项目管理
        </template>
      </side-btn>
      <side-btn url="/open-project">
        <template #btn-icon>
          <svg t="1589282906076" class="icon" viewBox="0 0 1180 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4560" width="22" height="22"><path d="M202.857132 286.352295H1032.707521v-72.230463a73.436927 73.436927 0 0 0-73.76477-73.764771h-442.588623V73.765505A73.777884 73.777884 0 0 0 442.589357 0.000734H73.765505A73.436927 73.436927 0 0 0 0.000734 73.765505V950.746665l129.091627-590.118164c0-41.491864 32.784342-74.276206 73.764771-74.276206z m848.288304 663.882935a73.790998 73.790998 0 0 1-73.764771 73.76477H55.327591l129.091626-608.556078c0-40.468992 32.784342-73.76477 73.253335-73.764771h848.79974A73.790998 73.790998 0 0 1 1180.237062 415.443922z m0 0" p-id="4561" fill="#1296db"></path></svg>
        </template>
        <template #btn-text>
          打开项目
        </template>
      </side-btn>
      <side-btn url="/view-edit">
        <template #btn-icon>
          <svg t="1589282801107" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3675" data-spm-anchor-id="a313x.7781069.0.i3" width="22" height="22"><path d="M512 0.2048C229.0688 0.2048 0.3072 228.9664 0.3072 512 0.2048 795.2384 228.9664 1024 512 1024 795.2384 1024 1024 795.2384 1024 512 1024 229.0688 795.2384 0.3072 512 0.3072z m44.8512 828.6208h-79.872v-79.9744h79.872v79.9744z m142.336-380.7232c-12.6976 22.4256-36.7616 51.2-73.5232 83.1488-23.9616 22.528-41.5744 38.4-48.0256 48.128a155.648 155.648 0 0 0-17.5104 36.6592c-4.8128 12.8-6.4512 36.864-6.4512 68.8128h-73.6256v-23.9616c0-30.4128 4.8128-56.0128 12.8-78.4384 6.4512-15.9744 16.0768-33.5872 30.4128-49.5616 9.6256-12.8 28.7744-30.4128 54.3744-52.8384 25.6-23.9616 43.2128-41.5744 51.2-55.9104a88.7808 88.7808 0 0 0 11.264-44.8512c0-28.672-11.264-55.9104-35.2256-78.336a115.712 115.712 0 0 0-84.7872-33.5872c-31.9488 0-59.1872 9.5232-81.6128 30.4128-22.3232 20.7872-35.1232 51.2-43.1104 94.3104l-78.4384-9.5232c6.4512-57.6512 27.2384-102.4 62.464-132.8128 35.1232-30.4128 79.872-46.3872 137.5232-46.3872 60.7232 0 108.7488 15.9744 145.5104 49.5616 36.864 33.5872 54.4768 71.9872 54.4768 120.0128 1.536 28.7744-4.8128 52.736-17.6128 75.1616z" fill="#1296db" p-id="3676"></path></svg>
        </template>
        <template #btn-text>
          帮助说明
        </template>
      </side-btn>
      <side-btn url="/plugins-list">
        <template #btn-icon>
          <svg t="1589125132629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12299" width="22" height="22"><path d="M733.909 264.8c0 0-175.415 8.442-237.668 11.239-38.476 1.757-59.403-30.891-25.462-64.632 26.082-25.861 35.579-33.163 31.126-81.455-5.106-55.3-60.796-73.275-106.505-72.761-47.812 0.565-100.148 25.702-115.563 71.297-10.138 29.901-9.843 60.045 16.38 79.244 14.307 10.491 45.973 25.963 10.453 54.269-19.168 15.289-212.173-2.847-212.173-2.847s-8.503 164.668-2.452 211.576c3.459 26.954 37.042 39.567 59.047 10.413 33.943-44.928 127.788-15.614 132.536 72.587 4.992 92.534-94.373 106.795-115.584 70.702-19.798-33.731-76.355-42.122-78.806 0.898-3.794 66.985 27.769 280.124 27.769 280.124s126.861 29.781 184.038 20.622c26.561-4.301 38.754-49.846 14.135-71.235-22.646-19.652-27.395-124.709 90.793-112.642 92.472 9.443 77.027 89.605 53.497 104.249-22.634 14.037-21.557 57.783 25.483 70.214 64.365 17.056 259.611-25.003 259.611-25.003s-25.797-157.256-17.164-208.215c9.223-54.562 72.207-21.64 80.076-11.219 50.935 67.429 156.563 30.57 156.563-82.616 0-164.839-150.839-136.815-165.034-97.218-15.689 43.604-67.61 32.427-73.252 5.635-13.261-62.582 8.156-233.228 8.156-233.228z" p-id="12300" fill="#1296db"></path></svg>
        </template>
        <template #btn-text>
          插件列表
        </template>
      </side-btn>
      <side-btn url="/sponsor">
        <template #btn-icon>
          <svg t="1589282975152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7284" width="22" height="22"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m38.4 764.8c0 19.2-16 38.4-38.4 38.4s-38.4-19.2-38.4-38.4v-352c0-22.4 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v352zM512 323.2c-28.8 0-51.2-22.4-51.2-51.2s22.4-51.2 51.2-51.2 51.2 22.4 51.2 51.2-22.4 51.2-51.2 51.2z" fill="#1296db" p-id="7285" data-spm-anchor-id="a313x.7781069.0.i15" class="selected"></path></svg>
        </template>
        <template #btn-text>
          帮助作者
        </template>
      </side-btn>
    </side-menu>

    <div class="views">
      <router-view></router-view>
    </div>
    <!-- <initPage></initPage> -->
    <!--<editPage></editPage>-->
  </div>
</template>
<script>
  import initPage from './pages/initPage/InitView.vue';
  import editPage from './pages/editPage/EditView.vue';

  import teButton from '../components/TeUi/TeButton.vue';
  import teDialog from '../components/TeUi/TeDialog.vue';

  import SideMenu from '../components/SideBar/SideMenu';
  import SideBtn from '../components/SideBar/SideBtn';

  // import newProject from './NewProjectPage.vue';
  // import openProject from './OpenProjectPage.vue';

  export default {
    name: 'body',
    components: {
      initPage,
      editPage,
      teButton,
      teDialog,
      SideMenu,
      SideBtn,
    },
  };
</script>

<style scoped>
  p {
    margin: 0;
    text-align: center;
    width: auto;
    height: auto;
  }

  .app-container {
    display: flex;
    height: calc(100% - 45px);
  }

  .views {
    padding: 20px 24px;
    box-sizing: border-box;
    overflow: auto;
    background: #1e1e20;
    width: 100%;
    height: 100%;
  }

  .span {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    border-top: 1px solid;
  }
</style>
